<template>
<!-- 朱玉豪 -->
<!-- 大乐透 -->
<div class="container">
    <wxc-minibar title="超级大乐透" :bar-style="borderBottom">
        <!-- <div class="header-img" slot="left" @click="onClickLeft">
            <image src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/back_icon.png" style="height:28px;width:16px;"></image>
        </div>
        <div class="header-con" slot="middle">
            <text class="header-title">超级大乐透</text>
        </div> -->
        <div class="header-right" slot="right" @click="linkRoute">
            <image style="width:40px;height:40px;" src="https://goucai-app.oss-cn-beijing.aliyuncs.com/home/show-play.png"></image>
        </div>
    </wxc-minibar>
    <scroller class="scroller"  style="position: fixed;top: 90px;bottom: 100px;left: 0px;right: 0px;">
        <div class="navdown">
            <div class="history">
                <div class="history-price-time-g" v-if="currentSell === null">
                    <text>{{historyMsg}}</text>
                </div>
                <div class="history-price-time-g" v-if="currentSell !== null">
                    <div class="history-price-time-fat">
                        <text class="history-price-time">{{currentSell.issue}}期开奖时间 {{currentSell.drawTime | filtertime }}</text>
                        <text class="history-price-time history-price-time-2">截止投注还有</text>
                    </div>
                    <wxc-countdown :interval="1000" tpl="{h}:{m}:{s}" :timeBoxStyle="{backgroundColor: '#fff', height: '30px', width: '30px'}" :timeTextStyle="{fontSize: '24px', color: '#E4242E'}" :dotTextStyle="{color: '#E4242E', fontSize: '26px'}" :dotBoxStyle="{width: '20px'}" :style="{justifyContent: 'center'}" :time="currentSell.sellEndTime">
                    </wxc-countdown>
                </div>
                <!-- 历史记录 -->
                <div class="history-list" v-if="history.length >0">
                    <div class="history-list-title">
                        <div class="history-list-title-f-h" style="flex-direction: row;margin-left:-2px">
                            <text class="history-list-title-f">{{history[0].issue}}期开奖</text>
                            <div class="history-list-title-num-arr">
                                <text class="history-list-title-num-arr-h-one" v-for="(item,index) in history[0].drawNumber.split('+')[0].split(',')" :key="index+1/3">{{item}}</text>
                                <text class="history-list-title-num-arr-hr">|</text>
                                <text class="history-list-title-num-arr-h-two" v-for="(item,index) in history[0].drawNumber.split('+')[1].split(',')" :key="index+1/4">{{item}}</text>
                            </div>
                        </div>
                        <div class="history-list-title-num-arrow" v-on:click="historyshow">
                            <image v-if="!historyShow" class="history-list-title-num-arrow-img" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/arrdown1.2.png" alt="arrow-down"></image>
                            <image v-if="historyShow" class="history-list-title-num-arrow-img2" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/arr_top.png" alt="arrow-top"></image>
                        </div>
                    </div>
                    <div class="history-list-items" v-if="historyShow">
                        <div class="history-list-items-item" :style="isOdd(index)" v-for="(item,index) in historyWithoutF" :key="index">
                            <text class="history-list-item-date">{{item.issue}}期开奖</text>
                            <div class="history-list-items-balls">
                                <text class="history-list-title-num-arr-h-one-black" v-for="(num1,index) in item.drawNumber.split('+')[0].split(',')" :key="index+1/5">{{num1}}</text>
                                <text class="history-list-title-num-arr-hr" style="visibility: hidden;">|</text>
                                <text class="history-list-title-num-arr-h-two" v-for="(num2,index) in item.drawNumber.split('+')[1].split(',')" :key="index+1/6">{{num2}}</text>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 历史记录 -->
                <!-- 选球区域 -->
                <div class="game-area">
                    <div class="game-area-forward">
                        <div class="game-area-forward-title">
                            <div class="game-area-forward-title-text">
                                <text class="game-area-forward-title-tips">前区(至少</text>
                                <text class="game-area-forward-title-tips" style="color: #E70D0D; font-size:27px;margin-left:4px;margin-right:4px;">5</text>
                                <text class="game-area-forward-title-tips">个)长按号码设胆</text>
                            </div>
                            <image class="game-area-forward-title-shake" :src="pageImage.hrefTitle+pageImage.imgs.shakephone" alt="" @click="shakephone"></image>
                        </div>
                        <lottoball :numarr="lottoNum.g_one.num" :textstyle="genaralBalls.forwardTextstyle" :s_ballStyle="genaralBalls.s_forwardBallStyle" :ballStyle="genaralBalls.forwardBallStyle" :s_ballClass="genaralBalls.forward_s" :ballClass="genaralBalls.forward" :ballTextstyle="lottoNum.g_one.style" v-on:sendGeneralBall="receiveGball_f" v-on:sendSpecialBall="receiveSball_f"></lottoball>
                    </div>
                    <div class="game-area-backward">
                        <div class="game-area-forward-title-text">
                            <text class="game-area-forward-title-tips">后区(至少</text>
                            <text class="game-area-forward-title-tips" style="color: #E70D0D;font-size:27px;margin-left:4px;margin-right:4px;">2</text>
                            <text class="game-area-forward-title-tips">个)长按号码设胆</text>
                        </div>
                        <lottoball :numarr="lottoNum.g_two.num" :textstyle="genaralBalls.backwardTextstyle" :s_ballStyle="genaralBalls.s_backwardBallStyle" :ballStyle="genaralBalls.backwardBallStyle" :s_ballClass="genaralBalls.backward_s" :ballClass="genaralBalls.backward" :ballTextstyle="lottoNum.g_two.style" v-on:sendGeneralBall="receiveGball_b" v-on:sendSpecialBall="receiveSball_b"></lottoball>
                    </div>
                </div>
                <!-- 选球区域 -->
            </div>
        </div>
    </scroller>
    <!-- 提交 -->
    <div class="chose-down" style="position: fixed;bottom: 0px;left: 0px;right: 0px;">
        <div class="chose-down-con">
            <div class="chose-down-mechose" @click="isBottomShow = !isBottomShow">
                <image class="chose-down-mechose-img" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/mechose.png"></image>
                <text class="chose-down-mechose-name">机选注数</text>
            </div>
            <div class="chose-down-submit">
                <div class="chose-down-money-g" v-if="ALLball >0">
                    <text class="chose-down-money">已选</text>
                    <text class="chose-down-money" style="color:red">{{s_nums}}</text>
                    <text class="chose-down-money">注</text>
                    <text class="chose-down-money" style="color:red">{{s_money}}</text>
                    <text class="chose-down-money">元</text>
                </div>
                <div class="chose-down-money-g" v-if="ALLball  === 0">
                    <text class="chose-down-money">摇一摇，机选一注</text>
                </div>
            </div>
        </div>
        <wxc-button text="选好了" :textStyle="textStyle" :btnStyle="btnStyle" @wxcButtonClicked="submit" style="height:98px"></wxc-button>

    </div>
    <!-- 提交 -->
    <wxc-dialog :title="dialog.diatitle" :content="dialog.diacontent" :show="dialog.diashow" :single="true" @wxcDialogCancelBtnClicked="wxcDialogCancelBtnClicked" @wxcDialogConfirmBtnClicked="wxcDialogConfirmBtnClicked" @wxcDialogNoPromptClicked="wxcDialogNoPromptClicked">
    </wxc-dialog>
    <!-- 机选注数 弹层 -->
    <wxc-popup popup-color="#F5F5F5" :show="isBottomShow" @wxcPopupOverlayClicked="isBottomCloseFn" pos="bottom" ref="wxcPopup" height="400">
        <div class="popup-title"><text class="popup-title-c">机选注数</text></div>
        <div class="popup-select-type">
            <div class="popup-btn btn-basis-color" v-for="(item,index) in selectBtnType" :key="index" @click="wxcSelectClicked(index)" :class="[ index !== zindex ? 'btn-basis-color' : 'btn-basis-color-active'] ">
                <text class="popup-btn-color" :style="{ 'color': index !== zindex ? '#333' : '#E70D0D' }">{{ item.text }}</text>
                <image  src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/sanjijao.png" class="sanjiao" v-if="index === zindex"></image>
            </div>
        </div>
        <div class="wxc-pop-list">
            <div class="wxc-pop-btn" @click="selectCancelClick"><text class="pop-btn-title">取消</text></div>
            <div class="wxc-pop-btn pop-cancle" @click="muchChose()"><text class="pop-btn-confirm" style="color:#fff">确定</text></div>
        </div>
    </wxc-popup>

    <!-- <wxc-popover ref="wxc-popover2" 
        :buttons="btns2" 
        :position="popoverPosition2" 
        :arrowPosition="popoverArrowPosition2" 
        @wxcPopoverButtonClicked="popoverButtonClicked">
      </wxc-popover> -->

</div>
</template>

<script>
import lottoball from "../../components/modules/lottoball.vue";

const storage = weex.requireModule("storage");
import {
    WxcCity,
    WxcCountdown,
    WxcDialog,
    WxcButton,
    WxcPopup,
    WxcPopover,
    Utils
} from "weex-ui";
import WxcMinibar from "@/components/modules/wxc-minibar/index.js"
const modal = weex.requireModule("modal");
const animation = weex.requireModule("animation");
import goucai from "../../js/components/module.js";
var sxglobalEvent = weex.requireModule("globalEvent");
const navigator = weex.requireModule("navigator");
import {
    serialize,
    getBaseUrl,
    jsonAnalysis
} from "@/utils/index.js";
import {
    GetResponsesToken
} from "@/api.js";
export default {
    components: {
        lottoball,
        WxcMinibar,
        WxcCountdown,
        WxcDialog,
        WxcButton,
        WxcPopover,
        WxcPopup
    },
    data() {
        return {
            historyMsg: '正在加载',
            currentSell: {
                issue: "00000",
                drawTime: "0000-00-00",
                openEndTime: 0
            },
            borderBottom: {
                borderbottomColor: '#f1f1f1',
                borderbottomWidth: '1px',
                borderbottomStyle: 'solid'
            },
            isBottomShow: false,
            canBuy: true,
			zindex: 0,
			lotteryLimit:'',
            selectBtnType: [{
                    text: "机选1注",
                    key: "one"
                },
                {
                    text: "机选5注",
                    key: "five"
                },
                {
                    text: "机选10注",
                    key: "ten"
                }
            ],
            popoverPosition2: {
                x: 0,
                y: -120
            },
            popoverArrowPosition2: {
                pos: "bottom",
                x: 40
            },
            textStyle: {
                fontSize: "32px"
            },
            btnStyle: {
                backgroundColor: "#E70D0D",
                width: "180px",
                height: "100px",
                borderRadius: "0px"
            },
            dialog: {
                diashow: false,
                diatitle: "标题",
                diacontent: "内容"
            },
            isChecked: false,
            historyShow: false,
            TIME: new Date().getTime() + 86400000,
            pageImage: {
                hrefTitle: "http://zhongcai-test.oss-cn-beijing.aliyuncs.com/test-huicai-admin/",
                imgs: {
                    shakephone: "shakep.png",
                    mechose: "mechose.png"
                }
            },
            pagetype: "superlotto-g" ,
            genaralBalls: {
                forward: [],
                forward_s: [],
                backward: [],
                backward_s: [],
                numberType: '8',
                forwardBallStyle: {
                    backgroundColor: "#e70d0d",
                    border: "1px solid #e70d0d"
                    // color: "#fff"
                },
                s_forwardBallStyle: {
                    color: "rgb(243, 141, 141)",
                    fontWeight: "bold",
                    fontSize: "24px"
                },
                s_backwardBallStyle: {
                    color: "rgb(141, 177, 226)",
                    fontWeight: "bold",
                    fontSize: "24px"
                },
                backwardBallStyle: {
                    backgroundColor: "#076bf2",
                    // color: "#fff",
                    border: "1px solid #076bf2"
                },
                forwardTextstyle: {
                    color: "#e70d0d"
                },
                backwardTextstyle: {
                    color: "#076BF2"
                }
            },
            endTime: "2018-10-19 10:50:00",
            history: [{
                    issue: "00000",
                    drawNumber: "00,00,00,00,00+00,00"
                },
                {
                    issue: "00000",
                    drawNumber: "00,00,00,00,00+00,00"
                }
            ],
            navDownshow: false,
            lottoNum: {
                g_one: {
                    num: 35
                },
                g_two: {
                    num: 12
                }
            },
            currentTitle: "超级大乐透",
            lottopageHeight: {}
        };
    },
    created() {
        // if (this.$route.query.from === "home") {
        //   this.getAllkesTab().then(value => {
        //     value.forEach((item, index) => {
        //       if (item.indexOf("numberlist") > -1) {
        //         storage.removeItem(item, e => {
        //           console.log(e);
        //         });
        //       }
        //     });
        //   });
        // }
        // const tabPageHeight = Utils.env.getPageHeight();
        // this.lottopageHeight = {
        //   height: tabPageHeight - 220 + "px"
        // };
    },

    filters: {
        filtertime(time) {
            let date = new Date(+time)
            let iarr = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
            let formatNum = (num) => {
                return num < 10 ? "0" + num : num.toString()
            }

            return `${formatNum(date.getMonth() + 1)}-${ formatNum(date.getDate())} ${iarr[date.getDay()]} ${date.getHours()}:${date.getMinutes()}`
        }
    },

    methods: {
        isBottomCloseFn() {
            this.isBottomShow = false
        },
        selectCancelClick() {
            this.$refs['wxcPopup'].hide();
        },
        //切换 机选注数方法
        wxcSelectClicked(index) {
            // 标记索引
            this.zindex = index
            // this.$refs.wxcPopup.hide();
        },
        getAllkesTab() {
            return new Promise((resolve, reject) => {
                storage.getAllKeys(event => {
                    if (event.result != "success") return false;
                    if (event.data && event.data.length > 0) {
                        resolve(event.data);
                    }
                });
            });
        },
        muchChose() {
            if (this.canBuy === false) {
                return modal.toast({
                    message: "暂无销售"
                });
            }
            let totalArr = [];
            if (this.zindex === 0) {
                totalArr.push(this.machinechose());
            } else if (this.zindex === 1) {
                for (let i = 0; i < 5; i++) {
                    totalArr.push(this.machinechose());
                }
            } else {
                for (let i = 0; i < 10; i++) {
                    totalArr.push(this.machinechose());
                }
            }
            this.$refs.wxcPopup.hide();
            //传参超级模范模板
            let hash = {
                from: "super-lotto",
                lottoType: 'super-lotto',
                type: 'machineChose', //机选
                data: JSON.stringify(totalArr),
                issue: this.currentSell.issue,
                issueId: this.currentSell.id,
                lotteryLimit: JSON.stringify(this.lotteryLimit)
            };



            let baseurl = getBaseUrl(weex.config.bundleUrl, true);
            let jUrl = baseurl + `views/confirm/confirm.js?` + serialize(hash);
            var params = {
                url: jUrl,
                animated: "true"
            };
            navigator.push(params);
        },
        submit() {
            if (this.canBuy === false) {
                return modal.toast({
                    message: "暂无销售"
                });
            }
            let chosetype = "handChose";
            if (this.pagetype === "superlotto-g") {
                //大乐透普通选号
                let Allballslen =
                    this.genaralBalls.forward.length +
                    this.genaralBalls.forward_s.length +
                    this.genaralBalls.backward.length +
                    this.genaralBalls.backward_s.length;
                if (Allballslen > 0 && this.s_nums < 1) {
                    return this.openDialog("提示", "至少选择1注");
                }
                if (Allballslen === 0) {
                    this.genaralBalls.forward = this.random(1, 35, 5);
                    this.genaralBalls.backward = this.random(1, 12, 2);
                    chosetype = "machineChose";
                }
                //大乐透 双色球    numberType  6:胆拖 7:复式 8:单式
                let danExist = this.genaralBalls.forward_s.length > 0 || this.genaralBalls.backward_s.length > 0;
                let fuExist = this.genaralBalls.forward.length + this.genaralBalls.backward.length > 7;
                if (danExist) {
                    this.genaralBalls.numberType = '6'
                }
                if (!danExist && fuExist) {
                    this.genaralBalls.numberType = '7'
                }
                if (!danExist && !fuExist) {
                    this.genaralBalls.numberType = '8'
                }
                this.genaralBalls.forward = goucai.ballSort(this.genaralBalls.forward);
                this.genaralBalls.forward_s = goucai.ballSort(
                    this.genaralBalls.forward_s
                );
                this.genaralBalls.backward = goucai.ballSort(
                    this.genaralBalls.backward
                );
                this.genaralBalls.backward_s = goucai.ballSort(
                    this.genaralBalls.backward_s
                );
                //传参超级模范模板
                let hash = {
                    from: "super-lotto",
                    lottoType: 'super-lotto',
                    type: chosetype, //手选
                    zhushu: this.s_nums, //注数
                    money: this.s_money, //金额
                    data: JSON.stringify(this.genaralBalls),
                    issue: this.currentSell.issue,
					issueId: this.currentSell.id,
					lotteryLimit: JSON.stringify(this.lotteryLimit)
				};
                

                let baseurl = getBaseUrl(weex.config.bundleUrl, true);
                let jUrl = baseurl + `views/confirm/confirm.js?` + serialize(hash);
                var params = {
                    url: jUrl,
                    animated: "true"
                };
                
                navigator.push(params);;
                //传参超级模范模板
            }
        },
        //组合函数
        combination(m, n) {
            //m为用户选了多少个，n为 **!规则!** 内一次取多少个数,(5,2)为一注,用户选择(x,y),注数=C(x,5)*C(y,2)
            return this.factorial(m, n) / this.factorial(n, n);
        },
        //阶乘，
        factorial(m, n) {
            var num = 1;
            var count = 0;
            for (var i = m; i > 0; i--) {
                if (count == n) {
                    break;
                }
                num = num * i;
                count++;
            }
            return num;
        },
        openDialog(title, content) {
            this.dialog.diatitle = title;
            this.dialog.diacontent = content;
            this.dialog.diashow = true;
        },
        wxcDialogCancelBtnClicked() {
            //此处必须设置，组件为无状态组件，自己管理
            this.dialog.diashow = false;
        },
        wxcDialogConfirmBtnClicked() {
            //此处必须设置，组件为无状态组件，自己管理
            this.dialog.diashow = false;
        },
        wxcDialogNoPromptClicked(e) {
            //此处必须设置，组件为无状态组件，自己管理
            // this.isChecked = e.isChecked;
        },
        shakephone() {
            this.genaralBalls.forward_s = [];
            this.genaralBalls.backward_s = [];
            this.genaralBalls.forward = goucai.ballSort(this.random(1, 35, 5));
            this.genaralBalls.backward = goucai.ballSort(this.random(1, 12, 2));
        },
        machinechose() {
            let chosed = {};
            chosed.numberType = '8';
            chosed.forward = goucai.ballSort(this.random(1, 35, 5));
            chosed.backward = goucai.ballSort(this.random(1, 12, 2));
            return chosed;
        },
        random(start, end, choseNum) {
            let randoms = [];
            while (true) {
                let isExists = false;
                // 获取一个1–35范围的数
                let a = (start + end * Math.random()).toString();
                let random = parseInt(a);
                // 判断当前随机数是否已经存在
                for (let i = 0; i < randoms.length; i++) {
                    if (random === randoms[i]) {
                        isExists = true;
                        break;
                    }
                }
                if (!isExists) randoms.push(random);
                if (randoms.length === choseNum) {
                    return randoms;
                }
            }
        },
        receiveSball_f(item) {
            //前胆
            let indexnum_s = this.genaralBalls.forward.indexOf(item);
            if (indexnum_s >= 0) {
                this.genaralBalls.forward.splice(indexnum_s, 1);
                return;
            }
            let indexnum = this.genaralBalls.forward_s.indexOf(item);
            if (indexnum >= 0) {
                this.genaralBalls.forward_s.splice(indexnum, 1);
            } else {
                if (this.genaralBalls.forward_s.length === 4) {
                    return this.openDialog("提示", "前区胆码最多选择4个");
                }
                this.genaralBalls.forward_s.push(item);
            }
        },
        receiveSball_b(item) {
            //后胆
            let indexnum_s = this.genaralBalls.backward.indexOf(item);
            if (indexnum_s >= 0) {
                return this.genaralBalls.backward.splice(indexnum_s, 1);
            }
            let indexnum = this.genaralBalls.backward_s.indexOf(item);
            if (indexnum >= 0) {
                this.genaralBalls.backward_s.splice(indexnum, 1);
            } else {
                if (this.genaralBalls.backward_s.length === 1) {
                    return this.openDialog("提示", "后区胆码最多选择1个");
                }
                this.genaralBalls.backward_s.push(item);
            }
        },
        receiveGball_f(item) {
            //前区
            let indexnum_s = this.genaralBalls.forward_s.indexOf(item);
            if (indexnum_s >= 0) {
                return this.genaralBalls.forward_s.splice(indexnum_s, 1);
            }
            let indexnum = this.genaralBalls.forward.indexOf(item);
            if (indexnum >= 0) {
                this.genaralBalls.forward.splice(indexnum, 1);
            } else {
                this.genaralBalls.forward.push(item);
            }
        },
        receiveGball_b(item) {
            //后区
            let indexnum_s = this.genaralBalls.backward_s.indexOf(item);
            if (indexnum_s >= 0) {
                return this.genaralBalls.backward_s.splice(indexnum_s, 1);
            }
            let indexnum = this.genaralBalls.backward.indexOf(item);
            if (indexnum >= 0) {
                this.genaralBalls.backward.splice(indexnum, 1);
            } else {
                this.genaralBalls.backward.push(item);
            }
        },
        onClickLeftc() {
            return new Promise((resolve, reject) => {
                modal.confirm({
                        message: "退出将清空所选投注号码",
                        okTitle: "确定",
                        cancelTitle: "取消",
                        duration: 0.3
                    },
                    function (value) {
                        resolve(value);
                    }
                );
            });
        },
        onClickLeft() {
            this.onClickLeftc().then(value => {
                if (value === "确定") {
                    navigator.pop();
                } else {
                    console.log(value);
                }
            });
        },
        addListtener() {
            // sxglobalEvent.addEventListener("androidback", e => {
            //   this.onClickLeftc().then(value => {
            //     if (value === "确定") {
            //       this.$router.push("/");
            //     } else {
            //       console.log(value);
            //     }
            //   });
            // });
        },
        addListtenerShakePhone() {
            sxglobalEvent.addEventListener("shakephone", e => {
                weex.requireModule("eventShakeModule").shakeWithType("city"); //震动
                this.shakephone();
            });
        },
        receiveShowStatus(item) {
            this.historyShow = item;
        },
        formatNum(num) {
            if (num < 10) return "0" + num;
            return num.toString();
        },
        historyshow() {
            this.historyShow = !this.historyShow
        },
        isOdd: function (index) {
            let indexnum = index + 1;
            if (indexnum % 2 == 0) {
                return {
                    backgroundColor: "#ebebeb"
                };
            }
        },
        async getHistory() {
            try {
                let req = await GetResponsesToken('lottery/issue/queryCurIssue/DLT')

                if (req.code !== 0) {
                    this.currentSell = null;
                    this.historyMsg = '发生错误';
                    this.canBuy = false;
                    return;
                }

                if (req.msg === "暂无销售") {
                    this.currentSell = null;
                    this.historyMsg = '暂无期次';
                    this.canBuy = false;
                } else {
                    this.currentSell = req.data.issue
                    this.currentSell['sellEndTime'] = Number(this.currentSell['sellEndTime'])
					this.history = req.data.list
					this.lotteryLimit = req.data.lotteryLimit
                }
            } catch (e) {}
        },

        linkRoute() {
            let baseurl = getBaseUrl(weex.config.bundleUrl, true);
            navigator.push({
                url:baseurl + `views/all-explain/superPalyGameAgreement.js`,
                animated: "true"
            });
        }
    },
    mounted() {
        this.getHistory();
        this.addListtener();
        this.addListtenerShakePhone();
    },
    destroyed() {
        // sxglobalEvent.removeEventListener("androidback");
        sxglobalEvent.removeEventListener("shakephone");
    },
    computed: {
        ALLball() {
            return (
                this.genaralBalls.forward.length +
                this.genaralBalls.forward_s.length +
                this.genaralBalls.backward.length +
                this.genaralBalls.backward_s.length
            );
        },
        historyWithoutF: function () {
            return this.history.slice(1);
        },
        s_nums() {
            //大乐透注数算法
            //无胆
            if (
                !this.genaralBalls.forward_s.length &&
                !this.genaralBalls.backward_s.length
            ) {
                if (
                    this.genaralBalls.forward.length >= 5 &&
                    this.genaralBalls.backward.length >= 2
                ) {
                    let num =
                        this.combination(this.genaralBalls.forward.length, 5) *
                        this.combination(this.genaralBalls.backward.length, 2);
                    return num;
                }
                return 0;
            }
            //有胆
            if (
                this.genaralBalls.forward_s.length ||
                this.genaralBalls.backward_s.length
            ) {
                console.log("有胆");
                if (
                    this.genaralBalls.forward.length +
                    this.genaralBalls.forward_s.length >=
                    5 &&
                    this.genaralBalls.backward.length +
                    this.genaralBalls.backward_s.length >=
                    2
                ) {
                    let f_need = 5 - this.genaralBalls.forward_s.length;
                    let b_need = 2 - this.genaralBalls.backward_s.length;
                    let num =
                        this.combination(this.genaralBalls.forward.length, f_need) *
                        this.combination(this.genaralBalls.backward.length, b_need);
                    return num;
                }
                return 0;
            }
        },
        s_money() {
            if (
                this.genaralBalls.forward.length + this.genaralBalls.forward_s.length >=
                5 &&
                this.genaralBalls.backward.length +
                this.genaralBalls.backward_s.length >=
                2
            ) {
                //大乐透注数算法
                let num = this.s_nums * 2;
                return num;
            }
            return 0;
        }
    }
};
</script>

<style scoped>
.pay-btn {
	width:180px;
	height: 98px;
	line-height: 98px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pay-btn-color {
	font-family: PingFangSC-Medium;
	font-size: 32px;
	color: #FFFFFF;
}
.header-con {
    /* flex: 1; */
    /* height: 90px; */
    display: flex;
    justify-content: center;
    position: relative;
    align-items: center;
    flex-direction: row;
}

.header-title {
    font-size: 34px;
    color: #fff;
    font-weight: 600;
    font-family: PingFangSC-Medium;
}

.header-right {
    /* flex: 1; */
    display: flex;
    justify-content: flex-end;
    flex-direction: row;
    align-items: center;
    width:110px;
  height:80px;
    /* margin-right: 34.3px; */
}

.header-img {
    /* flex: 1; */
    /* height: 90px; */
    display: flex;
    text-align: center;
    justify-content: flex-start;
    flex-direction: row;
    align-items: center;
    /* padding-left: 50px; */
}

.scroller {
    width: 750px;
    /* padding-bottom: 50px; */
    background-color: #f5f5f5;
}

.container {
    background-color: #f5f5f5;
}

/* chose-down */
.chose-down-money {
    font-size: 24px;
    color: #333333;
    align-self: center;
}

.chose-down-money-g {
    flex-direction: row;
    margin-right: 48px;
}

.chose-down-submit {
    flex-direction: row;
}

.chose-down-mechose-img {
    width: 34.5px;
    height: 38.5px;
    margin-top: 5px;
}

.chose-down-mechose-name {
    font-size: 20px;
    color: #333333;
    margin-top: 10px;
}

.chose-down-mechose {
    justify-content: center;
    align-items: center;
}

.chose-down {
    width: 750px;
    background-color: #fff;
    flex-direction: row;
    justify-content: space-between;
    height: 98px;
}

.chose-down-con {
    padding-left: 32px;
    width: 570px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

span {
    align-self: center;
    font-weight: bold;
}

.game-area-forward-title-text {
    flex-direction: row;
}

.game-area-forward-title {
    flex-direction: row;
    justify-content: space-between;
}

.game-area-forward-title-shake {
    width: 44px;
    height: 44px;
}

.game-area-forward-title-tips {
    font-size: 26px;
    align-self: center;
    font-weight: bold;
}

.game-area-backward {
    padding-top: 38px;
    padding-bottom: 70px;
    padding-left: 31px;
    padding-right: 31px;
}

.game-area-forward {
    padding-top: 38px;
    padding-bottom: 10px;
    padding-left: 31px;
    padding-right: 31px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: rgb(232, 229, 229);
}

.game-area {
    background-color: #f5f5f5;
    padding-bottom: 20px;
}
/* game-area */
/* history */

/* .history-list{
    height:72px;
} */
.history-list-items-balls {
    flex-direction: row;
}

.history-list-item-date {
    font-size: 24px;
    width: 170px;
    /* padding-left: 25px; */
}

.history-list-items {
    /* padding-top: 18px; */
    /* padding-bottom: 21px; */
}

.history-list-items-item {
    flex-direction: row;
  
    align-items: center;
    height:72px;
    /* padding-top: 22px;
    padding-bottom: 22px; */
    padding-left: 31px;
    background-color: #d8d8d8;
}

/* .odd {
                  }
                  .history-list-items-item:nth-child(odd) {
                    background-color: #d8d8d8;
                  }
                  .history-list-items-item:nth-child(even) {
                    background-color: #ebebeb;
                  } */
.history-list-title-num-arr-hr {
    font-size: 24px;
    margin-left: 6px;
    margin-right: 6px;
}

.history-list-title-num-arr-h-one {
    color: #de000e;
    margin-left: 6px;
    margin-right: 6px;
    font-size: 24px;
}

.history-list-title-num-arr-h-one-black {
    color: #333333;
    margin-left: 6px;
    margin-right: 6px;
    font-size: 24px;
    /* width: 20px; */
}

.history-list-title-num-arr-h-two {
    color: #0c50ee;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 6px;
    margin-right: 6px;
    font-size: 24px;
    margin-left: 6px;
    margin-right: 6px;
}

.history-list-title {
    flex-direction: row;
    /* padding-top: 18px;
    padding-bottom: 21px; */
    padding-left: 31px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: rgb(232, 229, 229);
    background-color: #ffffff;
    align-items: center;
    justify-content: space-between;
    padding-right: 30px;
    width: 750px;
    height:72px;
}

.history-list-title-f {
    font-size: 24px;
    width: 170px;
}

.history-list-title-num-arr {
    display: flex;
    flex-direction: row;
    align-self: center;
}

.arrow {
    flex: 4%;
    text-align: center;
}

.h_one {
    color: #de000e;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 4px;
    margin-right: 4px;
}

.history-list-title-num-arrow {
    flex-direction: row;
    height: 48px;
    justify-content: center;
    width: 100px;
    align-items: center;
}

.history-list-title-num-arrow-img {
    width: 28px;
    height: 17px;
    /* transform: rotate(0deg);
                      transition: All 200ms ease-in-out; */
    /* align-self: center; */
    position: absolute;
	top:16px;
	right:9px;
}

.history-list-title-num-arrow-img2 {
    width: 48px;
    height: 48px;
    /* transform: rotate(0deg);
                      transition: All 200ms ease-in-out; */
    /* align-self: center; */
    position: absolute;
	top:0;
	right:0;
}

.show {
    transform: rotate(-180deg);
}

/* history */
.history-price-time-g {
    flex-direction: row;
    /* padding-top: 18px;
    padding-bottom: 21px; */
    padding-left: 26px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: rgb(232, 229, 229);
    flex-wrap: wrap;
    background-color: #ffffff;
    height:72px;
}

.history-price-time-2 {
    margin-left: 10px;
}

.history-price-time {
    font-size: 24px;
    align-self: center;
}

.history-price-time-fat {
    flex-direction: row;
  
}

.popup-title-c {
    font-family: PingFangSC-Medium;
    padding-top: 45px;
    font-size: 36px;
    color: #333;
    margin-bottom: 48px;
    text-align: center;
}

.popup-select-type {
    padding-right: 37px;
    padding-left: 37px;
    margin-bottom: 90px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.wxc-pop-list {
    display: flex;
    flex-direction: row;
    box-shadow: 0px -5px 10px rgba(229, 229, 229, 0.50);
    position: absolute;
    bottom: 0px;
}

.wxc-pop-btn {
    flex: 1;
    width: 375px;
    height: 96px;
    justify-content: center;
    align-items: center;
    background-color: #FAFAFA;
}

.pop-cancle {
    background-color: #E70D0D;
}

.pop-btn-title {
    font-size: 32px;
    color: #333333;
}

.pop-btn-confirm {
    font-size: 32px;
    color: #fff;
}

.popup-btn {
    width: 200px;
    height: 72px;
    line-height: 72px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.btn-basis-color {
    background-color: #FFF;
    border-width: 2px;
    border-style: solid;
    border-color: #D1D1D1;
    border-radius: 9px;
    position: relative;
}

.btn-basis-color-active {
    background-color: #fff;
    border-width: 2px;
    border-style: solid;
    border-color: #E70D0D;
    border-radius: 9px;
    position: relative;
}

.popup-btn-color {
    font-size: 32px;
    text-align: center;
    font-family: PingFangSC-Medium;
}

.sanjiao{
	position: absolute;
	bottom: -1px;
	right: -2px;
	width:24.8px;
	height:28px;
    
}
</style>
